<template>
  <div class="app-layout">
    <!-- Header -->
    <LayoutHeader
      :activeModule="activeModule"
      @setting-command="handleSettingCommand"
      @set-active-module="setActiveModule"
    />

    <!-- Main Content -->
    <el-container class="app-content">
      <!-- Sidebar -->
      <LayoutSidebar
        :isCollapsed="isSidebarCollapsed"
        :activeModule="activeModule"
        :activeSubModule="activeSubModule"
        @toggle-sidebar="toggleSidebar"
        @set-submodule="setActiveSubModule"
        @set-active-module="setActiveModule"
      />

      <!-- Content Area -->
      <el-main class="app-main">
        <div class="page-header">
          <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>{{ moduleTitle }}</el-breadcrumb-item>
            <el-breadcrumb-item v-if="pageTitle !== moduleTitle">
              {{ pageTitle }}
            </el-breadcrumb-item>
          </el-breadcrumb>
          <h1 class="page-title">{{ pageTitle }}</h1>
        </div>

        <div class="page-content">
          <!-- 根据当前模块和子模块显示不同内容 -->
          <div v-if="activeModule === 'vocabulary' && activeSubModule === 'search'">
            <VocabularySearch />
          </div>
          <div v-else-if="activeModule === 'vocabulary' && activeSubModule === 'list'">
            <VocabularyList />
          </div>
          <div v-else-if="activeModule === 'vocabulary' && activeSubModule === 'practice'">
            <VocabularyPractice />
          </div>
          <div v-else-if="activeModule === 'vocabulary' && activeSubModule === 'history'">
            <QueryHistory @search-word="handleSearchWord" />
          </div>
          <div v-else-if="activeModule === 'vocabulary' && activeSubModule === 'progress'">
            <LearningProgress />
          </div>
          <div v-else-if="activeModule === 'courses' && activeSubModule === 'list'">
            <CourseList />
          </div>
          <div v-else>
            <div class="placeholder-content">
              <el-empty description="功能正在开发中" />
            </div>
          </div>
        </div>
      </el-main>
    </el-container>

    <!-- Footer -->
    <LayoutFooter />
  </div>
</template>

<script>
import LayoutHeader from '../components/layout/LayoutHeader.vue';
import LayoutSidebar from '../components/layout/LayoutSidebar.vue';
import LayoutFooter from '../components/layout/LayoutFooter.vue';

// Vocabulary components
import VocabularySearch from '../components/VocabularySearch.vue';
import VocabularyList from '../components/VocabularyList.vue';
import VocabularyPractice from '../components/VocabularyPractice.vue';
import QueryHistory from '../components/QueryHistory.vue';
import LearningProgress from '../components/LearningProgress.vue';

// Course components
import CourseList from '../components/CourseList.vue';

export default {
  name: 'MainLayout',
  components: {
    LayoutHeader,
    LayoutSidebar,
    LayoutFooter,
    VocabularySearch,
    VocabularyList,
    VocabularyPractice,
    QueryHistory,
    LearningProgress,
    CourseList,
  },
  data() {
    return {
      activeModule: 'vocabulary', // 当前激活的主模块
      activeSubModule: 'search', // 当前激活的子模块
      isSidebarCollapsed: false, // 侧边栏是否收起
    };
  },
  computed: {
    pageTitle() {
      if (this.activeModule === 'vocabulary') {
        switch (this.activeSubModule) {
          case 'search':
            return '词汇查询';
          case 'list':
            return '词汇列表';
          case 'practice':
            return '词汇练习';
          case 'history':
            return '查询历史';
          case 'progress':
            return '学习进度';
          default:
            return '词汇学习';
        }
      }

      switch (this.activeModule) {
        case 'listening':
          return '听力练习';
        case 'speaking':
          return '口语练习';
        case 'reading':
          return '阅读练习';
        case 'writing':
          return '写作练习';
        case 'courses':
          return '课程中心';
        default:
          return 'IELTS 英语学习平台';
      }
    },

    moduleTitle() {
      switch (this.activeModule) {
        case 'vocabulary':
          return '词汇学习';
        case 'listening':
          return '听力练习';
        case 'speaking':
          return '口语练习';
        case 'reading':
          return '阅读练习';
        case 'writing':
          return '写作练习';
        case 'courses':
          return '课程中心';
        case 'progress':
          return '学习进度';
        default:
          return 'IELTS 英语学习平台';
      }
    },
  },
  mounted() {
    // 初始化时根据路由设置模块和子模块
    this.initFromRoute();
  },
  methods: {
    handleSettingCommand(command) {
      console.log('Setting command:', command);
    },

    setActiveModule(module) {
      this.activeModule = module;
      // 根据主模块设置默认子模块
      this.setDefaultSubModule();
    },

    setActiveSubModule(subModule) {
      this.activeSubModule = subModule;
    },

    setDefaultSubModule() {
      // 根据主模块设置默认子模块
      switch (this.activeModule) {
        case 'vocabulary':
          this.activeSubModule = 'search';
          break;
        case 'courses':
          this.activeSubModule = 'list';
          break;
        default:
          this.activeSubModule = 'search';
      }
    },

    toggleSidebar() {
      this.isSidebarCollapsed = !this.isSidebarCollapsed;
    },

    initFromRoute() {
      // 根据当前路由初始化模块和子模块
      try {
        if (this.$route && this.$route.path) {
          const path = this.$route.path;
          const pathParts = path.split('/');

          if (pathParts.length >= 3) {
            if (pathParts[1] === 'vocabulary') {
              this.activeModule = 'vocabulary';
              this.activeSubModule = pathParts[2] || 'search';
            } else if (pathParts[1] === 'courses') {
              this.activeModule = 'courses';
              this.activeSubModule = pathParts[2] || 'list';
            }
          } else {
            // 默认路由
            this.activeModule = 'vocabulary';
            this.activeSubModule = 'search';
          }
        }
      } catch (error) {
        console.error('Error initializing from route:', error);
        // 出错时使用默认值
        this.activeModule = 'vocabulary';
        this.activeSubModule = 'search';
      }
    },


    handleSearchWord(word) {
      // 处理从查询历史组件传递过来的搜索词
      this.activeModule = 'vocabulary';
      this.activeSubModule = 'search';
      // 这里可以传递搜索词给词汇查询组件
      console.log('Search word from history:', word);
    },
  },
  watch: {
    // 监听路由变化以更新模块状态
    $route() {
      this.initFromRoute();
    },
  },
};
</script>

<style scoped>
.app-layout {
  height: 100vh;
  display: flex;
  flex-direction: column;
}

/* Main content area */
.app-content {
  flex: 1;
  padding: 0;
}

/* Main content area */
.app-main {
  background-color: #f8f9fa;
  padding: 20px !important;
}

.page-header {
  background-color: #ffffff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  margin-bottom: 20px;
}

.page-title {
  margin: 10px 0 0 0;
  color: #2c3e50;
  font-size: 24px;
}

.page-content {
  background-color: #ffffff;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  padding: 20px;
  min-height: 400px;
}

.placeholder-content {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 300px;
}

/* Footer styles */

/* Responsive design */
@media (max-width: 768px) {
  .app-content {
    flex-direction: column;
  }

  .sidebar-nav {
    display: flex;
    overflow-x: auto;
  }
}
</style>
